<!--
 * @Author: wangze@linkstec.com
 * @Date: 2022-02-10 16:10:46
 * @Function: Please Input Function
-->
<template>
  <el-select
    v-bind="SelectProps"
    v-on="$listeners"
    :filterable="filterable || format === 'account'"
    :popper-class="{'lk-select-dropdown-account': format === 'account'}"
    @change="selectChange"
  >
    <el-option v-if="selectAll && list.length" label="全选" value="" key="all"></el-option>
    <el-option
      :label="item[labelField]"
      :value="item[valueField]"
      :key="item[valueField]"
      v-for="item in listFormat">
      <slot :item="item">
        <template v-if="format === 'account'">
          <div class="option-main">
            <template v-if="tagMode === 'position'">
              <el-tag size="mini" :type="item.IS_SIMULATED ? 'warning' : 'primary'">
                {{ item.IS_SIMULATED ? '模拟' : '真实' }}
              </el-tag>
            </template>
            <template v-if="tagMode === 'default'">
              <el-tag size="mini" :type="+item.GT_CLIENT_TYPE === 1 ? 'warning' : 'primary'">
                {{ +item.GT_CLIENT_TYPE === 1 ? '机构' : '产品' }}
              </el-tag>
            </template>
            <el-tag v-if="item.IS_N3F" type="warning" size="mini">非三方</el-tag>
            <div class="option-value">
              <div class="row">
                {{ item[labelField] }}
                <b class="value-code">**{{ item[valueField] && item[valueField].slice(-4) }}</b>
              </div>
              <div class="row row-info" v-if="hasBalance">可用余额：{{ item[fields.BALANCE] | NumberFormat }} 元</div>
            </div>
          </div>
          <span class="option-extra">
            {{ item[fields.BRANCH_NAME] }}
          </span>
        </template>
      </slot>
    </el-option>
  </el-select>
</template>

<script>
import { Select } from 'element-ui';

export default {
  name: 'LkSelect',
  props: Object.assign({}, Select.props, {
    selectAll: {
      type: Boolean,
      default: false
    },
    list: {
      type: Array,
      default: () => {
        return [];
      }
    },
    labelName: {
      type: String,
      default: 'label'
    },
    valueName: {
      type: String,
      default: 'value'
    },
    // 格式化模式
    format: {
      type: String,
      default: '' // account, 资金账号选择, 格式: [机构/产品/真实/模拟/非三方] 账户名 ****账号后四位 分支机构名
    },
    formatParams: {
      type: Object,
      default: () => {
        return {};
      }
    }
  }),
  components: {},
  // 定义属性
  data () {
    const defaultFields = {
      // 账户相关字段默认值
      GT_CLIENT_TYPE: 'GT_CLIENT_TYPE', // 1机构/2产品
      CLIENT_ID: 'CLIENT_ID', // startsWith(15) 非三方
      BRANCH_NAME: 'BRANCH_NAME', // 分支机构
      IS_SIMULATED: 'isMock', // 是否模拟持仓 默认兼容 W7900315
      IS_N3F: 'rightType', // 是否非三方账户
      BALANCE: 'enableBalance' // 可用余额
    };
    return {
      fields: {
        ...defaultFields,
        ...this.formatParams
      },
      tagMode: this.formatParams.tagMode || 'default',
      hasBalance: this.formatParams.hasBalance
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
    SelectProps () {
      const props = {};
      Object.keys(Select.props).forEach(k => {
        typeof this[k] !== 'undefined' && (props[k] = this[k]);

        return props[k];
      });
      return props;
    },
    listFormat () {
      let result = [];
      if (this.format === 'account') {
        result = this.list.map(item => {
          return {
            ...item,
            GT_CLIENT_TYPE: item[this.fields.GT_CLIENT_TYPE],
            CLIENT_ID: item[this.fields.CLIENT_ID],
            BRANCH_NAME: item[this.fields.BRANCH_NAME],
            IS_SIMULATED: +item[this.fields.IS_SIMULATED] === 1,
            IS_N3F: [1, 2].includes(+item[this.fields.IS_N3F]) // 2是为了兼容旧接口
          };
        });
      } else {
        result = this.list;
      }
      return result;
    },
    labelField () {
      if (this.format === 'account') {
        if (this.labelName !== 'label') {
          return this.labelName;
        } else {
          return 'RIGHT_NAME';
        }
      } else {
        return this.labelName;
      }
    },
    valueField () {
      if (this.format === 'account') {
        if (this.valueName !== 'value') {
          return this.valueName;
        } else {
          return 'RIGHT_CODE';
        }
      } else {
        return this.valueName;
      }
    }
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    selectChange (v) {
      this.$nextTick(() => {
        if (this.selectAll) {
          // 全不选
          if (v.length > this.list.length) {
            this.$emit('input', []);
            this.$emit('change', []);
            return;
          }
          // 全选
          if (v.includes('')) {
            this.$emit('input', this.list.map(item => item[this.valueName]));
            this.$emit('change', this.list.map(item => item[this.valueName]));
          }
        }
      });
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='scss' scoped>
.lk-select-dropdown-account .el-select-dropdown__item {
  display: flex;
  height: auto;
  .el-tag {
    margin-right: 8px;
    margin-top: 7px;
    &:first-child {
      margin-left: -5px;
    }
  }
  .option-main {
    flex: 1;
    display: flex;
    .option-value {
      flex: 1;
      .value-code {
        color: #8492a6;
        font-size: 12px;
        margin-left: 5px;
      }
      .row:first-child + .row {
        margin-top: -5px;
      }
      .row-info {
        color: #9B9494;
        font-size: 12px;
        line-height: 22px;
        &:last-child {
          margin-bottom: 8px;
        }
      }
    }
  }
  .option-extra {
    font-size: 12px;
    color: #8492a6;
    margin: 0 -5px 0 10px;
    height: 34px;
    line-height: 34px;
    font-weight: inherit;
  }
  &.selected {
    .option-value {
      .row-info {
        color: #0065FB;
      }
    }
  }
}

.lk-select-dropdown-account.el-select-dropdown.is-multiple .el-select-dropdown__item {
  padding-right: 30px;
  &.selected::after {
    right: 10px;
  }
}
</style>
